<template>
    <nav class="animate__animated animate__bounceInLeft animate__slow">
        <div class="budget_item wait_do animate__animated animate__delay-2s animate__fadeIn animate__slow">
            <div>
                <n-tooltip trigger="hover">
                    <template #trigger>
                        <h4 class="title">{{ $t("home.accompanyCount") }}</h4>
                    </template>
                    {{ $t("home.accompanyCount") }}
                </n-tooltip>
                <p class="tip">{{ countObj.jobAccomTotal }}/{{ countObj.accomTotal }}</p>
            </div>
            <div class="icon-wrap">
                <img src="../../assets/images/waitdo.png" />
            </div>
        </div>
        <div class="budget_item green_do animate__animated animate__delay-3s animate__fadeIn animate__slow">
            <div>
                <n-tooltip trigger="hover">
                    <template #trigger>
                        <h4 class="title">{{ $t("home.unFullfillCount") }}</h4>
                    </template>
                    {{ $t("home.unFullfillCount") }}
                </n-tooltip>
                <p class="tip">{{ countObj.noOverOrderTotal }}</p>
            </div>
            <div class="icon-wrap">
                <img src="../../assets/images/plane.png" />
            </div>
        </div>
        <div class="budget_item coplit_do animate__animated animate__delay-4s animate__fadeIn animate__slow">
            <div>
                <n-tooltip trigger="hover">
                    <template #trigger>
                        <h4 class="title">{{ $t("home.orderMoneyTotal") }}</h4>
                    </template>
                    {{ $t("home.orderMoneyTotal") }}
                </n-tooltip>
                <p class="tip">￥{{ countObj.payTotal }}</p>
            </div>
            <div class="icon-wrap">
                <img src="../../assets/images/bag.png" />
            </div>
        </div>
        <div class="budget_item tree_do animate__animated animate__delay-5s animate__fadeIn animate__slow">
            <div>
                <n-tooltip trigger="hover">
                    <template #trigger>
                        <h4 class="title">{{ $t("home.fullfillOrderCount") }}/{{ $t("home.orderTotalCount") }}</h4>
                    </template>
                    {{ $t("home.fullfillOrderCount") }}/{{ $t("home.orderTotalCount") }}
                </n-tooltip>
                <p class="tip">{{ countObj.overOrderTotal }} / {{ countObj.orderTotal }}</p>
            </div>
            <div class="icon-wrap">
                <img src="../../assets/images/book.png" />
            </div>
        </div>
    </nav>
</template>

<script setup lang='ts' name="HomeMainGrid">
import { getAllCount, CountResult } from '@/api/backend/navCount';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
const { userInfo: { id } } = userStore;
const countObj = reactive<CountResult>({
    accomTotal: 0,
    jobAccomTotal: 0,
    orderTotal: 0,
    overOrderTotal: 0,
    noOverOrderTotal: 0,
    payTotal: 0
})
const initData = async () => {
    try {
        const res = await getAllCount(id);
        if (res.code !== 200) throw new Error(res.message);
        Object.assign(countObj, res.data);
    } catch (error) {
        console.log(error)
    }
}
initData();
</script>
<style scoped lang='scss'>
nav {
    grid-area: nav;
    padding: 1em 0;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 1em;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.27);
    height: calc(100% - 2em);
    width: 100%;
    @include useTheme {
        background: getVar('rawBg');
    }

    .budget_item {
        margin:0 auto;
        padding:0 1rem;
        width: calc(100% - 2em - 2rem);
        height: 100%;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &.wait_do {
            background: #fff9e6;

            .title {
                color: #ffa41f;
                font-size: 0.9em;
                line-height: 1em;
                width: 100px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .tip {
                color: #ffa41f;
                font-size: 1em;
                line-height: 0;
                font-weight: bold
            }
        }

        &.green_do {
            background: #e6fff2;

            .title {
                color: #11ad60;
                font-size: 0.9em;
                line-height: 1em;
                width: 100px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .tip {
                color: #11ad60;
                font-size: 1em;
                line-height: 0;
                font-weight: bold
            }
        }

        &.coplit_do {
            background: #e6efff;

            .title {
                color: #438cff;
                font-size: 0.9em;
                line-height: 1em;
                width: 100px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .tip {
                color: #438cff;
                font-size: 1em;
                line-height: 0;
                font-weight: bold
            }
        }

        &.tree_do {
            background: #e6fbff;

            .title {
                color: #7ddbee;
                font-size: 0.9em;
                line-height: 1em;
                width: 100px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .tip {
                color: #7ddbee;
                font-size: 1em;
                line-height: 0;
                font-weight: bold
            }
        }

        .icon-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #fff;
            height: 50%;
            aspect-ratio: 1 / 1;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

            img {
                height: 60%;
                width: 60%
            }

        }

    }
}
</style>